<template>
    <div class="search-box">
        <a href="javascript:;">
          <div class="return" id="return" @click="recovery">
            <i class="iconfont icon-return" style="font-size: 23px;" id="backHome-icon"></i>
          </div>
        </a>
        <div class="search">
            <form action="javascript:;" method="get">
              <input type="text"
                     v-model="keyWord"
                     :placeholder="$t('home.search.placeholder')"
                     autocomplete="off"
                     name="searchValue"
                     :title="$t('home.search.title')"
                     @keyup.enter = "toSearch">
              <a href="javascript:;">
                <div class="query" @click="toSearch"><i class="iconfont icon-search"></i></div>
              </a>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data(){
            return{
                keyWord:"",
            }
        },
        methods:{
            recovery(){
                this.keyWord = ""
                this.$parent.recovery();
                document.getElementById("return").style.backgroundColor="transparent"
                document.getElementById("return").style.color="transparent"
            },
            toSearch(){
                if (this.keyWord.trim() != "") {
                    this.$parent.toSearch(this.keyWord);
                    document.getElementById("return").style.backgroundColor="rgba(242, 242, 242, 0.75)"
                    document.getElementById("return").style.color="#6a6a6a"
                }
            }
        }

    }
</script>

<style scoped>
    .search-box{
      width: 820px;
      height: 60px;

      border-radius: 3px;
      margin-bottom: 12px;

      background: url(../../../assets/images/user/head-back/4.png) no-repeat;
      background-size:100% 100%;
    }
    .return{
      /*display: none;*/
      width: 35px;
      height: 35px;
      line-height: 35px;
      border-radius: 6px;
      text-align: center;
      font-size: 15px;
      position: absolute;
      top: 13px;
      left: 15px;
      color: transparent;
      background-color: transparent;
      transition: 0.3s;
    }

    .search{
      height: 40px;
      width: 380px;
      margin-left: 420px;
      /*margin-top: 50px;*/
      background-color: #e9e5e7;
      background-color: rgba(219, 230, 233, 0.83);
      border-radius: 5px;
      position: absolute;
      top: 11px;
    }
    .search input{
      height: 30px;
      width: 315px;
      border-radius: 5px;
      position: absolute;
      top: 4px;
      left: 5px;
      font-size: 13px;
      border: none;
      background-color: transparent;
      padding-left: 10px;
      color: #474747;
      font-weight: normal;
      letter-spacing: 1px;
      font-weight: bolder;
      transition: 0.5s;
    }
    .search input::placeholder{
      color: #535353;
      font-weight: normal;
    }
    .search input:hover{
      background-color: rgba(237, 237, 237, 0.93);
    }
    .query{
      height: 32px;
      width: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 5px;
      position: absolute;
      top: 4px;
      right: 5px;
      border: none;
      color: rgb(248, 248, 248);
      transition: 0.2s;
      /*background-color: cadetblue;*/
    }
    .query i{
      font-size: 28px;
      color: #656565;
      /*font-weight: bolder;*/
    }
    .query:hover{
      background-color: rgba(237, 237, 237, 0.93);
    }
</style>
